<template>
	<view class="floorLayout" :animation="animationBounceInUp">
		<view class="floorLeft border_box">
			<view class="border_inner">
				<view class="global-visualization-box-head">{{ lf_title }}
				</view>
				<view class="fleft_echart">
					<uni-echarts ref="echarts1fl" :option="optionFFLValue" canvasId="echarts1fl"></uni-echarts>
				</view>
			</view>
		</view>
		<view class="floorRight border_box">
			<view class="border_inner">
				<view class="global-visualization-box-head">{{ rg_title }}
				</view>
				<view class="floor-right-container" id="visualization-floor-div">
					<img :src="floorImage" class="fright_echart" />
					<div class="floor-right-layout">
						<div class="device_item" :id="'point_'+index" v-for="(item,index) in offsetArray">
							<div class="device_point" :class="item.state==1?'bgroundsel':'bgroundnor'"
								v-if="item.state==0||item.state==1">
							</div>
						</div>
					</div>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import moment from "moment";
	import store from '@/store/index.js';
	import * as echarts from 'echarts';
	import $config from '@/common/config.js';
	import request from '@/common/request.js';
	const CHNUMBER = ['零', '一', '二', '三', '四', '五', '六'];
	const FLOORCODEARRAY = [
		// { value: '0.00', code: 'DL-AMC3', name: '一层总表', unit: 'kWh' },  //插座代替 ’总表‘ 显示
		{
			value: '0.00',
			code: 'DL-AMC3',
			name: '一层',
			unit: 'kWh',
			zcode: 'DL-ADL400-14',
		},
		{
			value: '0.00',
			code: 'DL-AMC4',
			name: '二层',
			unit: 'kWh',
			zcode: 'DL-ADL400-15',
		},
		{
			value: '0.00',
			code: 'DL-AMC5',
			name: '三层',
			unit: 'kWh',
			zcode: 'DL-ADL400-16',
		},
		{
			value: '0.00',
			code: 'DL-AMC6',
			name: '四层',
			unit: 'kWh',
			zcode: 'DL-ADL400-17',
		},
		{
			value: '0.00',
			code: 'DL-AMC7',
			name: '五层',
			unit: 'kWh',
			zcode: 'DL-ADL400-18',
		},
		{
			value: '0.00',
			code: 'DL-AMC8',
			name: '六层',
			unit: 'kWh',
			zcode: 'DL-ADL400-19',
		},
	];
	const COLORS = ['rgba(118, 219, 251)', 'rgba(123, 253, 192)', 'rgba(255, 230, 101)', 'rgba(165, 108, 250)'];
	const DATE_TIME_FORMAT = 'YYYY-MM-DD HH:mm:ss';
	import {
		CONSTALLS,
		offset1Array,
		offset2Array,
		offset3Array
	} from "@/common/const_data.js";
	import {
		getGeoJsonOf,
		getSensorJsonOf,
		option
	} from "@/common/geoJson.data.tc";
	import UniEcharts from '@/components/echarts-uniapp/echarts-uniapp.vue';
	import {
		option1FLValue
	} from "@/common/floor_echart_data.js";
	export default {
		components: {
			UniEcharts
		},
		props: {
			floorIndex: {
				type: Number,
				default: 1
			},
		},
		data() {
			return {
				lf_title: '一层能耗数据(最近24小时)',
				rg_title: '一层平面图',
				optionFFLValue: {},
				screenFont: 12,
				echartInstance: {},
				animationBounceInUp: {},
				floorData: [
					[],
					[],
					[],
					[],
					[],
					[]
				],
				deviceState: false,
				offsetArray: [{
					"state": -1
				}, {
					"state": -1
				}, {
					"state": -1
				}, {
					"state": -1
				}, {
					"state": -1
				}, {
					"state": -1
				}, {
					"state": -1
				}, {
					"state": -1
				}, {
					"state": -1
				}, {
					"state": -1
				}, {
					"state": -1
				}, {
					"state": -1
				}, {
					"state": -1
				}, {
					"state": -1
				}, {
					"state": -1
				}, {
					"state": -1
				}, {
					"state": -1
				}],
				offset1Array: [{
					"name": "S4-01",
					"code": "S50404-01",
					"position": [36, 60],
					"state": 1
				}, {
					"name": "S3-09",
					"code": "S50301-09",
					"position": [16, 76],
					"state": 1
				}, {
					"name": "S4-02",
					"code": "S50404-02",
					"position": [112, 60],
					"state": 1
				}, {
					"name": "S3-0A",
					"code": "S50301-0A",
					"position": [158, 10],
					"state": 1
				}, {
					"name": "S3-0B",
					"code": "S50301-0B",
					"position": [208, 76],
					"state": 1
				}, {
					"name": "S3-0C",
					"code": "S50301-0C",
					"position": [248, 76],
					"state": 1
				}, {
					"name": "S3-0D",
					"code": "S50301-0D",
					"position": [278, 76],
					"state": 1
				}, {
					"name": "S3-0E",
					"code": "S50301-0E",
					"position": [336, 76],
					"state": 1
				}],
				offset2Array: [{
					"name": "S3-0F",
					"code": "S50301-0F",
					"position": [5, 38],
					"state": 1
				}, {
					"name": "S3-10",
					"code": "S50301-10",
					"position": [5, 96],
					"state": 1
				}, {
					"name": "S3-11",
					"code": "S50301-11",
					"position": [45, 38],
					"state": 1
				}, {
					"name": "S3-12",
					"code": "S50301-12",
					"position": [45, 96],
					"state": 1
				}, {
					"name": "S3-13",
					"code": "S50301-13",
					"position": [82, 38],
					"state": 1
				}, {
					"name": "S3-14",
					"code": "S50301-14",
					"position": [82, 96],
					"state": 1
				}, {
					"name": "S3-15",
					"code": "S50301-15",
					"position": [120, 38],
					"state": 1
				}, {
					"name": "S3-16",
					"code": "S50301-16",
					"position": [120, 96],
					"state": 1
				}, {
					"name": "S3-17",
					"code": "S50301-17",
					"position": [160, 12],
					"state": 1
				}, {
					"name": "S4-03",
					"code": "S50404-03",
					"position": [190, 96],
					"state": 1
				}, {
					"name": "S3-18",
					"code": "S50301-18",
					"position": [236, 96],
					"state": 1
				}, {
					"name": "S3-19",
					"code": "S50301-19",
					"position": [274, 96],
					"state": 1
				}, {
					"name": "S3-1A",
					"code": "S50301-1A",
					"position": [312, 96],
					"state": 1
				}, {
					"name": "S3-1B",
					"code": "S50301-1B",
					"position": [350, 96],
					"state": 1
				}, {
					"name": "S3-1D",
					"code": "S50301-1D",
					"position": [390, 96],
					"state": 1
				}, {
					"name": "S3-1C",
					"code": "S50301-1C",
					"position": [390, 42],
					"state": 1
				}],
				offset3Array: [{
					"name": "S3-1E",
					"code": "S50301-1E",
					"position": [45, 38],
					"state": 1
				}, {
					"name": "S3-1F",
					"code": "S50301-1F",
					"position": [5, 96],
					"state": 1
				}, {
					"name": "S3-20",
					"code": "S50301-20",
					"position": [45, 96],
					"state": 1
				}, {
					"name": "S3-21",
					"code": "S50301-21",
					"position": [82, 38],
					"state": 1
				}, {
					"name": "S3-22",
					"code": "S50301-22",
					"position": [82, 96],
					"state": 1
				}, {
					"name": "S3-23",
					"code": "S50301-23",
					"position": [120, 38],
					"state": 1
				}, {
					"name": "S3-24",
					"code": "S50301-24",
					"position": [120, 96],
					"state": 1
				}, {
					"name": "S3-25",
					"code": "S50301-25",
					"position": [160, 12],
					"state": 1
				}, {
					"name": "S4-04",
					"code": "S50404-04",
					"position": [190, 96],
					"state": 1
				}, {
					"name": "S3-26",
					"code": "S50301-26",
					"position": [236, 96],
					"state": 1
				}, {
					"name": "S3-27",
					"code": "S50301-27",
					"position": [274, 96],
					"state": 1
				}, {
					"name": "S3-28",
					"code": "S50301-28",
					"position": [312, 96],
					"state": 1
				}, {
					"name": "S3-29",
					"code": "S50301-29",
					"position": [350, 38],
					"state": 1
				}, {
					"name": "S3-2A",
					"code": "S50301-2A",
					"position": [350, 96],
					"state": 1
				}, {
					"name": "S3-2B",
					"code": "S50301-2B",
					"position": [390, 38],
					"state": 1
				}, {
					"name": "S3-2C",
					"code": "S50301-2C",
					"position": [390, 96],
					"state": 1
				}],
				offset4Array: [{
					"name": "S3-2D",
					"code": "S50301-2D",
					"position": [5, 38],
					"state": 1
				}, {
					"name": "S3-2E",
					"code": "S50301-2E",
					"position": [5, 96],
					"state": 1
				}, {
					"name": "S3-2F",
					"code": "S50301-2F",
					"position": [45, 38],
					"state": 1
				}, {
					"name": "S3-30",
					"code": "S50301-30",
					"position": [45, 96],
					"state": 1
				}, {
					"name": "S3-31",
					"code": "S50301-31",
					"position": [82, 38],
					"state": 1
				}, {
					"name": "S3-32",
					"code": "S50301-32",
					"position": [82, 96],
					"state": 1
				}, {
					"name": "S3-33",
					"code": "S50301-33",
					"position": [120, 38],
					"state": 1
				}, {
					"name": "S3-34",
					"code": "S50301-34",
					"position": [120, 96],
					"state": 1
				}, {
					"name": "S3-35",
					"code": "S50301-35",
					"position": [160, 12],
					"state": 1
				}, {
					"name": "S4-05",
					"code": "S50404-05",
					"position": [190, 96],
					"state": 1
				}, {
					"name": "S3-36",
					"code": "S50301-36",
					"position": [236, 96],
					"state": 1
				}, {
					"name": "S3-37",
					"code": "S50301-37",
					"position": [274, 96],
					"state": 1
				}, {
					"name": "S3-38",
					"code": "S50301-38",
					"position": [312, 96],
					"state": 1
				}, {
					"name": "S3-39",
					"code": "S50301-39",
					"position": [350, 38],
					"state": 1
				}, {
					"name": "S3-3A",
					"code": "S50301-3A",
					"position": [350, 96],
					"state": 1
				}, {
					"name": "S3-3B",
					"code": "S50301-3B",
					"position": [390, 38],
					"state": 1
				}, {
					"name": "S3-3C",
					"code": "S50301-3C",
					"position": [390, 96],
					"state": 1
				}],
				offset5Array: [{
					"name": "S3-3D",
					"code": "S50301-3D",
					"position": [5, 38],
					"state": 1
				}, {
					"name": "S3-3E",
					"code": "S50301-3E",
					"position": [5, 96],
					"state": 1
				}, {
					"name": "S3-3F",
					"code": "S50301-3F",
					"position": [45, 38],
					"state": 1
				}, {
					"name": "S3-40",
					"code": "S50301-40",
					"position": [45, 96],
					"state": 1
				}, {
					"name": "S3-41",
					"code": "S50301-41",
					"position": [82, 38],
					"state": 1
				}, {
					"name": "S3-42",
					"code": "S50301-42",
					"position": [82, 96],
					"state": 1
				}, {
					"name": "S3-43",
					"code": "S50301-43",
					"position": [120, 38],
					"state": 1
				}, {
					"name": "S3-44",
					"code": "S50301-44",
					"position": [120, 96],
					"state": 1
				}, {
					"name": "S3-45",
					"code": "S50301-45",
					"position": [160, 12],
					"state": 1
				}, {
					"name": "S4-06",
					"code": "S50404-06",
					"position": [190, 96],
					"state": 1
				}, {
					"name": "S3-46",
					"code": "S50301-46",
					"position": [236, 96],
					"state": 1
				}, {
					"name": "S3-47",
					"code": "S50301-47",
					"position": [274, 96],
					"state": 1
				}, {
					"name": "S3-48",
					"code": "S50301-48",
					"position": [312, 96],
					"state": 1
				}, {
					"name": "S3-49",
					"code": "S50301-49",
					"position": [350, 38],
					"state": 1
				}, {
					"name": "S3-4A",
					"code": "S50301-4A",
					"position": [350, 96],
					"state": 1
				}, {
					"name": "S3-4B",
					"code": "S50301-4B",
					"position": [390, 38],
					"state": 1
				}, {
					"name": "S3-4C",
					"code": "S50301-4C",
					"position": [390, 96],
					"state": 1
				}],
				offset6Array: [{
					"name": "S3-4D",
					"code": "S50301-4D",
					"position": [5, 38],
					"state": 1
				}, {
					"name": "S3-4E",
					"code": "S50301-4E",
					"position": [5, 96],
					"state": 1
				}, {
					"name": "S3-4F",
					"code": "S50301-4F",
					"position": [45, 38],
					"state": 1
				}, {
					"name": "S3-50",
					"code": "S50301-50",
					"position": [45, 96],
					"state": 1
				}, {
					"name": "S3-51",
					"code": "S50301-51",
					"position": [82, 38],
					"state": 1
				}, {
					"name": "S3-52",
					"code": "S50301-52",
					"position": [82, 96],
					"state": 1
				}, {
					"name": "S3-53",
					"code": "S50301-53",
					"position": [120, 38],
					"state": 1
				}, {
					"name": "S3-54",
					"code": "S50301-54",
					"position": [120, 96],
					"state": 1
				}, {
					"name": "S3-55",
					"code": "S50301-55",
					"position": [160, 12],
					"state": 1
				}, {
					"name": "S4-07",
					"code": "S50404-07",
					"position": [190, 96],
					"state": 1
				}, {
					"name": "S3-56",
					"code": "S50301-56",
					"position": [236, 96],
					"state": 1
				}, {
					"name": "S3-57",
					"code": "S50301-57",
					"position": [274, 96],
					"state": 1
				}, {
					"name": "S3-58",
					"code": "S50301-58",
					"position": [312, 96],
					"state": 1
				}, {
					"name": "S3-59",
					"code": "S50301-59",
					"position": [350, 96],
					"state": 1
				}, {
					"name": "S3-5A",
					"code": "S50301-5A",
					"position": [390, 96],
					"state": 1
				}, {
					"name": "S3-5B",
					"code": "S50301-5B",
					"position": [390, 38],
					"state": 1
				}],
				floorImage: 'http://portal.xumengte.com/images/floory_1.png'
			}
		},
		watch: {
			floorIndex(newValue, oldValue) {
				console.log(newValue, '---newFloor----')
				console.log(oldValue, '---oldFloor----')
				this.lf_title = CHNUMBER[newValue] + '层能耗数据(最近24小时)'
				this.rg_title = CHNUMBER[newValue] + '层平面图'
				if (store.state.hasLogin) {
					this.logMulti()
				}
				this.floorImage = 'http://portal.xumengte.com/images/floory_' + newValue + '.png'
				this.resizePoints();
				setTimeout(() => {
					if (store.state.hasLogin) {
						this.realFData();
					}
				}, 2000);
			}
		},
		created() {
			let that = this;
			uni.$on('refreshDevices', (res) => {
				that.realFData();
			})
		},
		beforeDestroy() {
			console.log('beforeDestroy==>>');
			uni.$off('refreshDevices')
		},
		unmounted() {},
		mounted() {
			let that = this;
			let width = 480 //原图宽度
			let height = 180 //原图高度
			this.screenFont = store.state.screenWidth / 1920 * 16;
			this.optionFFLValue = option1FLValue;
			this.optionFFLValue.legend.itemHeight = this.screenFont * 2 / 3;
			this.optionFFLValue.legend.textStyle.fontSize = this.screenFont * 2 / 3;
			let dom = document.getElementById("visualization-floor-div")
			let realHeight = parseInt(dom.clientHeight) //实际高度
			let realWidth = parseInt(dom.clientWidth)
			this.resizePoints();

			if (store.state.hasLogin) {
				this.logMulti()
			}

			setTimeout(() => {
				if (store.state.hasLogin) {
					that.realFData();
				}
			}, 8000);

		},
		methods: {
			resizePoints() {
				let that = this;
				let width = 480 //原图宽度
				let height = 180 //原图高度
				let dom = document.getElementById("visualization-floor-div")
				let realHeight = parseInt(dom.clientHeight) //实际高度
				let realWidth = parseInt(dom.clientWidth)
				let positionArray = []
				if (this.floorIndex == 1) {
					for (let i = 0; i < this.offset1Array.length; i++) {
						this.offsetArray[i] = this.offset1Array[i];
					}
					positionArray = this.offset1Array;
				} else if (this.floorIndex == 2) {
					for (let i = 0; i < this.offset2Array.length; i++) {
						this.offsetArray[i] = this.offset2Array[i];
					}
					positionArray = this.offset2Array;
				} else if (this.floorIndex == 3) {
					for (let i = 0; i < this.offset3Array.length; i++) {
						this.offsetArray[i] = this.offset3Array[i];
					}
					positionArray = this.offset3Array;
				} else if (this.floorIndex == 4) {
					for (let i = 0; i < this.offset4Array.length; i++) {
						this.offsetArray[i] = this.offset4Array[i];
					}
					positionArray = this.offset4Array;
				} else if (this.floorIndex == 5) {
					for (let i = 0; i < this.offset5Array.length; i++) {
						this.offsetArray[i] = this.offset5Array[i];
					}
					positionArray = this.offset5Array;
				} else {
					for (let i = 0; i < this.offset6Array.length; i++) {
						this.offsetArray[i] = this.offset6Array[i];
					}
					positionArray = this.offset6Array;
				}
				for (let i = 0; i < positionArray.length; i++) {
					let position = positionArray[i].position;
					let dom = document.getElementById("point_" + i)
					let offsetLeft = position[0] //原图left
					let offsetTop = position[1] //原图top
					let left = offsetLeft * realWidth / width
					let top = offsetTop * realHeight / height
					if (dom) {
						// console.log('point_==>>>', dom)
						dom.style.top = top + "px"
						dom.style.left = left + "px"
					}
				}
			},
			realFData() {
				let that = this;
				let deviceArr;
				if (this.floorIndex == 1) {
					deviceArr = this.offset1Array.map(item => item.code.replaceAll("-", "")).join(",")
				} else if (this.floorIndex == 2) {
					deviceArr = this.offset2Array.map(item => item.code.replaceAll("-", "")).join(",")
				} else if (this.floorIndex == 3) {
					deviceArr = this.offset3Array.map(item => item.code.replaceAll("-", "")).join(",")
				} else if (this.floorIndex == 4) {
					deviceArr = this.offset4Array.map(item => item.code.replaceAll("-", "")).join(",")
				} else if (this.floorIndex == 5) {
					deviceArr = this.offset5Array.map(item => item.code.replaceAll("-", "")).join(",")
				} else {
					deviceArr = this.offset6Array.map(item => item.code.replaceAll("-", "")).join(",")
				}
				console.log('deviceArr==>>', deviceArr);
				let postData = {
					deviceIds: deviceArr,
					restTime: 10
				};
				let headerdata = {
					"content-type": "application/json"
				};
				request.postRaw('/jeecgboot/device/data/realDataOnline', headerdata, postData).then(resData => {
					console.log('resData==>>', resData);
					if (resData.code == 200) {
						let resultData = resData.result;
						// console.log('offsetArray==>>', that.offsetArray);
						that.offsetArray.forEach(item => {
							if (item.code) {
								item.state = resultData[item.code.replaceAll("-", "")]
							}
						})
					}
				}).catch(errData => {
					console.log('errData==env>>', errData)
				});
			},
			logMulti() {
				let that = this;
				let postData = {
					timeType: 'hour', //最近一周
					startTime: moment().startOf('hour').add(-24, 'hour').format(DATE_TIME_FORMAT),
					endTime: moment().startOf('hour').format(DATE_TIME_FORMAT),
					projectId: $config.pcode,
					deviceId: FLOORCODEARRAY[this.floorIndex - 1].code + ',' + FLOORCODEARRAY[this.floorIndex - 1]
						.zcode,
				};
				let headerdata = {
					"content-type": "application/json"
				};
				request.postRaw('/jeecgboot/device/data/logMulti', headerdata, postData).then(resData => {
					console.log('resData==>>', resData);
					if (resData.code == 200) {
						let resultData = resData.result;
						if (resultData) {
							let hotData = resultData[1]?.data.map((item, index) => {
								if (item && item.power) {
									return Number(item.power.toFixed(2));
								}
								return 0;
							});
							let hotData2 = resultData[0].data.map((item, index) => {
								if (item && item.power) {
									if (resultData[1] && resultData[1].data[index] && resultData[1].data[
											index].power) {
										let power = item.power - resultData[1].data[index].power;
										return power > 0 ? power.toFixed(2) : 0;
									}
								}
								return 0;
							});
							//x轴横坐标取值数据
							let xDataArray = resultData[0].range.map((item) => {
								return item.substring(11) + '时';
							});

							that.optionFFLValue = {
								...that.optionFFLValue,
								series: [{
									...that.optionFFLValue.series[0],
									data: hotData
								}, {
									...that.optionFFLValue.series[1],
									data: hotData2
								}],
								xAxis: [{
									...that.optionFFLValue.xAxis[0],
									data: xDataArray
								}]
							};
						}
					}
				}).catch(errData => {
					console.log('errData==env>>', errData)
				});
			},
		},
	}
</script>
<style>
	@import 'index.css';
</style>
